<template>
  <view class="padding-bottom-sm">
    <!-- 详情 -->
    <uni-card title="我的信息" extra="专科查体信息">
      <view class="container">
        <view class="title-content">
          <view class="title">姓名：</view>
          <view class="content">{{ evaluationData.name }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">我的病情：</view>
          <view class="content">{{ evaluationData.subName }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">手机号：</view>
          <view class="content">{{ evaluationData.phoneNumber }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">身份证号：</view>
          <view class="content">{{ evaluationData.idNumber }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">出生地址：</view>
          <view class="content">{{ evaluationData.address }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">关节侧别：</view>
          <view class="content">{{ getBodySide() }}</view>
        </view>
      </view>
    </uni-card>

    <uni-card title="疼痛性质 [ VAS评分(0-10分) ]" extra="专科查体信息">
      <view class="container">
        <view class="title-content">
          <view class="title">静息痛：</view>
          <view class="content">{{ evaluationData.restPain }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">运动痛 ：</view>
          <view class="content">{{ evaluationData.movePain }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">天气变化时疼痛：</view>
          <view class="content">{{ evaluationData.weatherPain }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">关节畏寒：</view>
          <view class="content">{{ evaluationData.jointCold }}</view>
          <view class="unit">分</view>
        </view>
      </view>

    </uni-card>

    <uni-card title="炎症 [ VAS评分(0-10分)]" extra="专科查体信息">
      <view class="container">
        <view class="title-content">
          <view class="title">关节肿胀程度：</view>
          <view class="content">{{ evaluationData.jointSwell }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">局部皮温：</view>
          <view class="content">{{ evaluationData.skinTemperature }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">晨僵时间：</view>
          <view class="content">{{ evaluationData.morningStiffnessTime }}</view>
          <view class="unit">分</view>
        </view>
      </view>
    </uni-card>

    <uni-card title="功能 [ VAS评分(0-10分) ]" extra="专科查体信息">
      <view class="container">
        <view class="title-content">
          <view class="title">蹲起：</view>
          <view class="content">{{ evaluationData.squating }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">上下楼梯：</view>
          <view class="content">{{ evaluationData.climbingStairs }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">一次性站立时间：</view>
          <view class="content">{{ evaluationData.standingTime }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">一次性步行距离：</view>
          <view class="content">{{ evaluationData.walkingDistance }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">需要助行器械：</view>
          <view class="content">{{ evaluationData.walkingAids }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">做家务：</view>
          <view class="content">{{ evaluationData.doingChores }}</view>
          <view class="unit">分</view>
        </view>
      </view>
    </uni-card>

    <uni-card title="其他 [ VAS评分(0-10分) ]" extra="专科查体信息">
      <view class="container">
        <view class="title-content">
          <view class="title">膝关节上10cm大腿周径：</view>
          <view class="content">{{ evaluationData.thighCircu }}</view>
          <view class="unit">cm</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">膝关节活动度：</view>
          <view class="content">{{ evaluationData.kneeMotion }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">膝关节ROM测试：</view>
          <view class="content">{{ evaluationData.jointTesting }}</view>
          <view class="unit">分</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">内侧胫股关节间隙压痛：</view>
          <view class="content">{{ getExit(evaluationData.medialTibia) }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">外侧胫股关节间隙压痛：</view>
          <view class="content">{{ getExit(evaluationData.medicalFibula) }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">麦氏征：</view>
          <view class="content">{{ getYinYang(evaluationData.maishiSymptoms) }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">过伸实验：</view>
          <view class="content">{{ getYinYang(evaluationData.overbendingTest) }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">过屈试验：</view>
          <view class="content">{{ getYinYang(evaluationData.hyperextensionTest) }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">Beighton评分：</view>
          <view class="content">{{ evaluationData.beightonScore }}</view>
          <view class="unit">分</view>
        </view>
      </view>
    </uni-card>

  </view>
</template>

<script>
  export default {
    onLoad(option) {
      const id = option.id
      // 加载数据
      this.evaluationData.id = id;
      this.fetchData();
    },
    data() {
      return {
        evaluationData: {},
      };
    },
    methods: {
      getYinYang(value) {
        switch (value) {
          case "0":
            return "阴性";
          case "1":
            return "阳性";
          default:
            return "/";
        }
      },
      getExit(value) {
        switch (value) {
          case "0":
            return "无";
          case "1":
            return "有";
          default:
            return "/";
        }
      },
      // 获取侧别信息
      getBodySide() {
        switch (this.evaluationData.bodySide) {
          case "0":
            return "左侧";
          case "1":
            return "右侧";
          case "2":
            return "双侧";
          default:
            return "/";
        }
      },
      // 获取到dataForm信息
      async fetchData() {
        const {
          data: res
        } = await uni.$http.get(`/evaluation/detail/${this.evaluationData.id}`)
        if (res.code !== 200) return uni.$showMsg()
        this.evaluationData = res.data
      }
    }
  }
</script>

<style lang="scss">
  .container {
    display: flex;
    align-items: center;
    overflow-x: auto;

    /* 溢出内容滚动 */
    .title-content {
      display: flex;
      align-items: center;

      .title {
        font-size: 14px;
        color: #333;
        flex-shrink: 0;
        /* 题目不缩小 */
      }

      .content {
        color: #666;
        font-size: 14px;
        white-space: nowrap;
        /* 不换行 */
        padding-right: 10px;
        /* 为滚动条留出空间 */
      }
    }

    .unit {
      font-size: 14px;
      color: gray;
      color: #666;
      /* 内容颜色，比题目颜色浅一些 */
    }
  }
</style>